<!DOCTYPE html>
<html>
	<head>
		<style>
			div{
				width:50px;
				height:50px;
				border-radius:50%;
		        color:white;
				background-color:dimgrey;
				float:left;
				text-align:center;
				font-size:16px;
				cursor:pointer;
				margin:2px;
				transition:all 1s;
	            border:0.5px solid black;
			    line-height:50px;

			}
			div:hover{
				background-color:orange;
			}
			#outer{
				width:220px;
				height:377px;
				border-radius:10px;
				background-color:black;
				margin:0 auto;
				float:none;
				padding:5px;
			}
		    .float{
				float:left;
			}
			#line1{
				width:100%;
				background-color:black;
				margin:0 auto;
			}
			#result{
				width:100%;
				background-color:black;
				text-align:right;
				margin:0 auto;
				font-size:35px;
		
			}
			#div7{
				width:105px;
				border-radius:25px;
				
			}
			.color1{
				background-color:darkgrey;
				float:left;
			}
			.color2{
				background-color:orange;
				float:left;
			}
		</style>

		<title></title>
	</head>
	<body>
		<div id="outer">
			
			<div id="line1"></div>
		
			<div id="result" onclick="clickSymbol('0')">0</div>

			<div class="color1" onclick="clearZero();">AC</div>
			<div class="color1" onclick="backUp();"><-</div>			
			<div class="color1" onclick="clickSymbol('%')">%</div>			
			<div class="color2" onclick="clickSymbol('/')">/</div>

      <div class="float" onclick="clickSymbol('7')">7</div>
			<div class="float" onclick="clickSymbol('8')">8</div>			
			<div class="float" onclick="clickSymbol('9')">9</div>			
			<div class="color2"  onclick="clickSymbol('*')">*</div>	
			
				<div class="float" onclick="clickSymbol('4')">4</div>
				<div class="float" onclick="clickSymbol('5')">5</div>			
				<div class="float" onclick="clickSymbol('6')">6</div>			
				<div class="color2"  onclick="clickSymbol('-')">-</div>	


				<div class="float" onclick="clickSymbol('1');">1</div>
				<div class="float" onclick="clickSymbol('2');">2</div>			
				<div class="float" onclick="clickSymbol('3');">3</div>			
				<div class="color2" onclick="clickSymbol('+')">+</div>	
				
				<div class="float" id="div7"  onclick="clickSymbol('0');">0</div>
				<div class="float" onclick="clickSymbol('.')">.</div>			
				<div class="color2" onclick="calculate();">=</div>	
			</div>
			
		</div>
		<script>
			function clickSymbol(str){
				var show=document.getElementById('result');
				if(show.innerHTML=='0'&& str !='.')
				{
					show.innerHTML='';
				}
				if(show.innerHTML.length>=10)
				{
				 alert("超出输入长度！");	
				}
				else
				{
					show.innerHTML += str;
				}	
			}
			
			function calculate(){
				var show=document.getElementById('result');
				var a=eval(show.innerHTML);
				show.innerHTML=a;
			}
			
			function backUp(){
				var show=document.getElementById('result');
				var str=show.innerHTML.substr(0,show.innerHTML.length-1);
				show.innerHTML=str;
				if(show.innerHTML.length==0)
				{
					show.innerHTML=0;
				}
			}
			
			function clearZero(){
				var show=document.getElementById('result');
				show.innerHTML=0;
			}
			
			
			
		</script>
	</body>
</html>